<template>
  <Table class="table" :columns="columns" :table-data="tableData"></Table>
</template>
<script>
import Table from "vue-table/vue2";
export default {
  components: { Table },
  data() {
    return {
      /**@type {import("vue-table/vue2").Column[]} */
      columns: [
        {
          label: "表头1",
          prop: "col1",
          width: "500px",
        },
        {
          label: "表头2",
          prop: "col2",
          fixed: "right",
          children: [
            {
              label: "表头2-1",
              prop: "col2-1",
            },
            {
              label: "表头2-2",
              prop: "col2-2",
            },
          ],
        },
        {
          label: "表头3",
          prop: "prop3",
          fixed: "left",
        },
        {
          label: "表头4",
          prop: "prop4",
          fixed: "left",
        },
        {
          label: "3层表头",
          prop: "prop--3",
          fixed: "right",
          children: [
            {
              label: "3层表头-1",
              prop: "col2",
              children: [
                {
                  label: "3层表头-1-1",
                  prop: "col2-1",
                },
                {
                  label: "3层表头-1-2",
                  prop: "col2-2",
                },
              ],
            },
            {
              label: "3层表头-2",
              prop: "col2",
              children: [
                {
                  label: "3层表头-2-1",
                  prop: "col2-1",
                },
                {
                  label: "3层表头2-2",
                  prop: "3层表头-2-2",
                },
                {
                  label: "3层表头2-3",
                  children: [
                    {
                      label: "3层表头2-3-1",
                    },
                    {
                      label: "3层表头2-3-1",
                    },
                    {
                      label: "3层表头2-3-1",
                      children: [
                        {
                          label: "3层表头2-3-1",
                        },
                        {
                          label: "3层表头2-3-111",
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      tableData: [
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
        {
          col1: "1",
          "col2-1": "2",
          "col2-2": "2-1",
          prop3: "3",
          prop4: "4",
        },
      ],
    };
  },
};
</script>
<style scoped>
.table {
  height: 500px;
  width: 1200px;
}
</style>
